<template>
  <div class="aui-pc-content">
    <el-row :gutter="20">
      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-5">
            <i class="el-icon-lx-people grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.dcount }}</div>
              <div>今日申请总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-6">
            <i class="el-icon-lx-notice grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.wcount }}</div>
              <div>本周申请总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-7">
            <i class="el-icon-lx-goods grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.mcount }}</div>
              <div>本月申请总数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-8">
            <i class="el-icon-lx-goods grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.qcount }}</div>
              <div>本季度总数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-1">
            <i class="el-icon-lx-people grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.notremoecount }}</div>
              <div>未销假总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-2">
            <i class="el-icon-lx-notice grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.notremoecount }}</div>
              <div>未回校总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-3">
            <i class="el-icon-lx-goods grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.excount }}</div>
              <div>入校异常总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-4">
            <i class="el-icon-lx-goods grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalSummary.exremovecount }}</div>
              <div>销假异常总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-date-picker
        @change="changerange"
        v-model="daterange"
        :clearable="false"
        type="daterange"
        align="left"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card shadow="hover" style="height: 380px">
          <div id="main1" style="width: 100%; height: 350px"></div>
        </el-card>
      </el-col>

      <el-col :span="10">
        <el-card shadow="hover" style="height: 380px">
          <div id="main2" style="width: 100%; height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="aui-clear-tab">
      <el-col :span="14">
        <el-card shadow="hover" style="height: 410px">
          <div slot="header" class="clearfix">
            <span>待审批（{{ appllycount }}）</span>
            <el-button
              @click="goShenPi"
              type="text"
              style="float: right; font-size: 13px"
              >去审批<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </div>
          <template>
            <el-table :data="tabData" height="330">
              <el-table-column
                fixed
                label="序号"
                type="index"
                width="50"
              ></el-table-column>
              <el-table-column fixed prop="name" label="申请人">
              </el-table-column>
              <el-table-column label="进行中">
                <template slot-scope="scope">
                  <span v-if="scope.row.isstandcome == 1">单独入校 </span>
                  <span v-else>
                    {{ curApply[scope.row.curapply] }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="请假类别">
                <template slot-scope="scope">
                  <span v-if="scope.row.leavetype == ''">--</span>
                  <span v-else>
                    {{ scope.row.leavetype }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column width="150" label="开始/结束时间">
                <template slot-scope="scope">
                  <span v-if="scope.row.isstandcome == 1">--</span>
                  <div v-else>
                    <span>
                      {{ scope.row.starttime }}
                    </span>
                    <br />
                    <span>
                      {{ scope.row.endtime }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="cometime"
                width="150"
                label="入校时间"
                fixed="right"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="hover" style="height: 410px">
          <div slot="header" class="clearfix">
            <el-row style="margin-bottom: 0">
              <el-col :span="20">
                <span>院系关注地点统计</span>
              </el-col>
              <el-col :span="4" style="text-align: right;">
                <el-dropdown>
                  <span
                    v-if='followPlaces.length>0'
                    class="el-dropdown-link"
                    style="font-size: 13px; color: #66b1ff"
                  >
                    关注地点<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <span
                    v-else
                    class="el-dropdown-link"
                    style="font-size: 13px; color: #66b1ff"                    
                  >
                    设置关注<i class="el-icon-s-tools el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item style="width: 300px" >
                      <el-tag
                        @click="goGuanzhu"
                        v-for="(item, more) in followPlaces"
                        :key="more + '9'"
                        class="follow_tag"
                        >{{ item }}</el-tag
                      ></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
          <template>
            <el-table :data="placesFollows" height="330">
              <el-table-column
                fixed
                label="序号"
                type="index"
                width="50"
              ></el-table-column>
              <el-table-column prop="place" label="地点"> </el-table-column>
              <el-table-column label="数量(人/次)">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.count }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="详情">
                <template slot-scope="scope">
                  <el-button type="text" @click="checkDetail(scope.row)"
                    >查看</el-button
                  >
                </template>
                <!--<el-button type="text" @click="checkDetail(scope.row)">查看</el-button>-->
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" >
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>院系班级请假中数量统计</span>
          </div>
          <el-row :gutter="12" style="display:flex;flex-wrap:wrap;">

              <el-card v-for="(dept, index) in deptdata"
              :key="index + '2'"
              class="aui-pc-bow" shadow="always" style="margin-right:15px;">
                <p>
                  <em>({{ dept.count }}个)</em>
                </p>
                <p >
                  {{ dept.syndept }}
                </p>
              </el-card>
            <!-- <el-col
              v-for="(dept, index) in deptdata"
              :span="3"
              :key="index"
              class="aui-pc-bow"
            >
              <el-card shadow="always">
                <p>
                  <em>({{ dept.count }}个)</em>
                </p>
                <p>
                  {{ dept.syndept }}
                </p>
              </el-card>
            </el-col> -->
          </el-row>
        </el-card>
      </el-col></el-row
    >
    <!-- 查看弹窗 begin-->
    <el-dialog title="具体人员列表" :visible.sync="dialogVisible" width="60%">
      <!-- 表格 -->
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          stripe
          class="my_table"
        >
          <el-table-column prop="name" label="姓名" fixed="left">
          </el-table-column>
          <el-table-column prop="sno" label="学号"> </el-table-column>
          <el-table-column prop="syndeptname" label="班级"> </el-table-column>
          <el-table-column prop="visitplace" label="当前状态">
            <template slot-scope="scope">
              <span>{{ curApply[scope.row.curapply] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="visitplace" label="造访地" width="200">
          </el-table-column>
          <el-table-column label="是否单独入校" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.isstandcome == 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="createtime" label="创建时间" fixed="right">
          </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 查看弹窗 end-->
  </div>
</template>

<script>
import Schart from "vue-schart";
import bus from "../common/bus";
import moment from "moment";
import * as echarts from "echarts";

export default {
  name: "dashboard",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              console.log(picker, "daterange1");
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      daterange: [],
      code: "zApVJLnJbj",
      dialogVisible: false,
      appllycount: 0,
      placesFollows: [],
      follows: "",
      tabData: [],
      places: [],
      query: {
        pageinfo: {
          pageindex: 1,
          pagesize: 10,
        },
        conditions: {},
      },
      query1: {
        pageinfo: {
          pageindex: 1,
          pagesize: 10,
        },
        conditions: {},
      },
      curApply: {
        1: "请假",
        2: "入校",
        3: "销假",
        4: "完成",
      },
      name: localStorage.getItem("ms_username"),
      //				code: 'Ak13tfblGU',
      //				deptid: '',
      starttime: moment().subtract(6, "d").format("YYYY-MM-DD"),
      endtime: moment().format("YYYY-MM-DD"),

      pickrange: [],
      tableData: [],
      totalSummary: {},
      deptdata: [],
      data: [
        {
          name: "2018/09/04",
          value: 1083,
        },
        {
          name: "2018/09/05",
          value: 941,
        },
      ],
      options: {
        type: "bar",
        title: {
          text: "最近一周的请假情况",
        },
        xRorate: 25,
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [],
      },
      options3: {
        title: {
          text: "最近请假人数统计",
          // subtext: '纯属虚构',
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          containLabel: true,
        },
        legend: {
          data: ["Growth", "Budget 2011", "Budget 2012"],
          itemGap: 5,
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            show: true,
            start: 0,
            end: 100,
          },
          {
            type: "slider",
            start: 20,
            end: 100,
            moveHandleSize: 3,
          },
        ],
        series: [],
      },

      options2: {
        title: {
          text: "入校前造访地区统计",
          // subtext: '纯属虚构',
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "15%",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "65%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      userinfo: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      followPlaces: [],
    };
  },
  components: {
    Schart,
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  created() {
    let my_token = localStorage.getItem("my_token");
    this.code = this.getQueryVariable('code');
    if (!my_token) {
      this.Login();
    } else {
      this.userinfo = JSON.parse(localStorage.getItem("my_user"));
      this.fetchData();
      var tag = 0;
      if (this.userinfo.roleid == 1) {
        tag = 1;        
      }
      this.getData(tag);
      //获取关注地点
      this.GetFollowPlaces();
    }
    this.daterange = [this.starttime, this.endtime];
  },
  methods: {
    //获取url参数
			getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for(var i in vars) {
					var pair = vars[i].split("=");
					if(pair[0] == variable) {
						return pair[1];
					}
				}
				return(false);
			},
    changerange() {
      if (this.daterange === null || this.daterange.length == 0) {
        this.starttime = moment().subtract(6, "d").format("YYYY-MM-DD");
        this.endtime = moment().format("YYYY-MM-DD");
        this.daterange = [];
        this.daterange = [this.starttime, this.endtime];
      } else {
        var daterange = this.daterange;
        this.starttime = moment(daterange[0]).format("YYYY-MM-DD");
        this.endtime = moment(daterange[1]).format("YYYY-MM-DD");
      }
      this.fetchData();
    },
    checkDetail(row) {
      this.tableData = row.arrvis;
      this.dialogVisible = true;
    },
    //查看弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    getData(tab) {
      let that = this;
      let apiUrl1;
      let query;      
      if (tab === 0) {
        apiUrl1 = "/Approve/MyApprovings";
        query = that.query;
      } else {
        apiUrl1 = "/Approve/AllApprovings";
        that.query1.conditions.substate = [];
        that.query1.conditions.status = 1;
        that.query1.conditions.apprResult = 1;
        query = that.query1;
      }
      that.postAxios(apiUrl1, query).then((res) => {
        if (res.code == 0) {
            that.tabData = res.page.data;
            that.appllycount = res.page.count;
        }
      });
    },

    changeDate() {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${
          date.getMonth() + 1
        }/${date.getDate()}`;
      });
    },
    fetchData() {
      let that = this;
      that
        .postAxios(
          "/Statistics/Place?starttime=" +
            this.starttime +
            "&endtime=" +
            this.endtime,
          null
        )
        .then((res) => {
          if (res.code == 0) {
            that.places = res.data;
            let arr = res.data;
            for (let i = 0; i < arr.length; i++) {
              arr[i].value = arr[i].count;
              arr[i].name = arr[i].place;
            }
            that.options2.series[0].data = arr;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main2"));
            // 绘制图表
            myChart.setOption(that.options2);
          }
        });
      that
        .postAxios(
          "/Statistics/TotalSummary?starttime=" +
            this.starttime +
            "&endtime=" +
            this.endtime,
          null
        )
        .then((res) => {
          if (res.code == 0) {
            that.totalSummary = res.data;
          }
        });
      that
        .postAxios(
          "/Statistics/Category?starttime=" +
            this.starttime +
            "&endtime=" +
            this.endtime,
          null
        )
        .then((res) => {
          if (res.code == 0) {
            that.options3.series = res.data.data;
            //处理数据
            let dataArr = res.data.data;
            for (let i = 0; i < dataArr.length; i++) {
              dataArr[i].name = dataArr[i].label;
              dataArr[i].type = "bar";
            }
            let arr = res.data.daterange;
            let new_time = [];
            for (let i = 0; i < arr.length; i++) {
              new_time.push(moment(arr[i]).format("YYYY-MM-DD"));
            }
            that.options3.xAxis.data = new_time;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main1"));
            // 绘制图表
            myChart.setOption(that.options3);
          }
        });

      that
        .postAxios(
          "/Statistics/leavebydept?starttime=" +
            this.starttime +
            "&endtime=" +
            this.endtime,
          null
        )
        .then((res) => {
          if (res.data.length > 0) {
            that.deptdata = res.data;
          }
        });

      //获取院系关注地点
      that.postAxios("/SysSetting/GetDeptFollows", null).then((res) => {
        console.log(res, "weeeee");
        if (res.data.length > 0) {
          console.log(res.data);
          that.follows = res.data;

          that
            .postAxios(
              "/Statistics/PlacesFollows?starttime=" +
                this.starttime +
                "&endtime=" +
                this.endtime +
                "&places=" +
                that.follows,
              null
            )
            .then((res1) => {
              console.log(res1, "QA");
              if (res1.data.length > 0) {
                that.placesFollows = res1.data;
              }
            });
        }
      });
    },
    //code 换取用户的sno和
    Login() {
      let that = this;
      that.postAxios("/Login/Login?code=" + this.code, null).then((res) => {
        if (res.code == 0) {
          let token = res.data.token;
          let user = res.data.user;
          user = JSON.stringify(user);
          localStorage.setItem("my_token", token);
          localStorage.setItem("my_user", user);
          //刷新页面，header组件重新获取用户信息
          that.$router.go(0);
        } else {
          that.$notify.error({
            title: "错误",
            message: "登录失败",
          });
          that.yindaoRouter();
        }
      });
    },
    yindaoRouter() {
      let eUrl = encodeURI("http://115.26.89.144");
      window.location.href =
        "http://authserver.tmu.edu.cn/authserver/oauth2.0/authorize?response_type=code&client_id=EoCOWF80&redirect_uri=" +
        eUrl +
        "&state=1";
    },
    goShenPi() {
      this.$router.push({
        path: "/applymanage",
      });
    },
    goGuanzhu(){
        this.$router.push({
        path: "/setplace",
      });
    },
    //
    GetFollowPlaces() {
      let that = this;
      that.postAxios("/SysSetting/GetDeptFollows", null).then((res) => {
        if (res.code == 0) {
          let str = res.data;
          if (str) {
            that.followPlaces = str.split(",");
            console.log("that.followPlaces", that.followPlaces);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #52596e;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 5px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: #4fb1fe;
}

.grid-con-1 .grid-num {
  color: #4fb1fe;
}

.grid-con-2 .grid-con-icon {
  background: #7be036;
}

.grid-con-2 .grid-num {
  color: #7be036;
}

.grid-con-3 .grid-con-icon {
  background: #fc9b6f;
}

.grid-con-3 .grid-num {
  color: #fc9b6f;
}

.grid-con-4 .grid-con-icon {
  background: #b277ea;
}

.grid-con-4 .grid-num {
  color: #b277ea;
}

.grid-con-5 .grid-con-icon {
  background: #fdd867;
}

.grid-con-5 .grid-num {
  color: #fdd867;
}

.grid-con-6 .grid-con-icon {
  background: #61ddd3;
}

.grid-con-6 .grid-num {
  color: #61ddd3;
}

.grid-con-7 .grid-con-icon {
  background: #fc7dc0;
}

.grid-con-7 .grid-num {
  color: #fc7dc0;
}

.grid-con-8 .grid-con-icon {
  background: #ff6a6a;
}

.grid-con-8 .grid-num {
  color: #ff6a6a;
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 15px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 350px;
}

.el-card {
  border: none;
}
.el-card__body p {
  font-size: 14px;
  text-align: center;
}

.el-card__body p em {
  color: #66b1ff;
  font-size: 14px;
}

.el-card__header span {
  font-size: 16px;
  color: #17233d;
}
.el-card__header span.follow_tag {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
  margin-top: 10px;
}
.el-dropdown-menu--small .el-dropdown-menu__item {
  padding: 8px 15px;
}
.el-dropdown-menu--small .el-dropdown-menu__item:hover {
  background: none;
}
.el-tag--small {
  margin-right: 5px;
}
</style>

<style type="text/css">
/*.el-card__header span.follow_tag {
		 font-size: 12px;
		 color: #666;
	}*/
</style>